<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2022-8-11</title>
    <style></style>
</head>

<body>

    <button class="add">添加一条新的访客信息</button>
    <button class="sort">从小到大</button>
    <button class="del">删除选中</button>
    <table border="1" cellspacing="0" cellpadding="10">
        <tr>
            <th>序列号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>操作</th>
            <th>选择</th>
        </tr>
    </table>
    <script>
        var info = [
            { name: "胡杭", age: 16 },
            { name: "胜明", age: 22 },
            { name: "军毅", age: 21 },
            { name: "晓华", age: 13 },
            { name: "盛聪", age: 23 },
            { name: "侦剑", age: 32 },
            { name: "红翔", age: 25 },
            { name: "超维", age: 18 },
            { name: "士琪", age: 22 },
            { name: "艳华", age: 20 }
        ];
        //获取元素
        var add = document.querySelector('.add');//获取到第一个button按钮
        var sort = document.querySelector('.sort')//获取了类名是sort的按钮
        var del = document.querySelector('.del');//获取删除选中
        var tbody = document.querySelector('tbody');
        //序列号0
        var count = 1;//点一次就自增一次 所以创建一个变量
        //点击事件 给add添加
        add.onclick = function () {
            //动态创建一行↓
            tbody.innerHTML += `
        <tr>
            <td>${count}</td>
            <td>${info[count].name}</td>
            <td>${info[count].age}</td>
            <td><button class='deletes'>删除</button></td>
            <td><input type='checkbox'></td>
        </tr>
            `
            count++;
            // 1  2  3  4  5  6...直到没有数据可获取 不断拼接下一条数据
            // console.log(count);
            if (count == info.length) {//判断一下有没有添加完毕 
                add.disabled = true;//如果数据都添加完了 按钮就点击不了
            }
            var deletes = document.querySelectorAll('.deletes');
            // console.log(deletes);
            deletes.forEach(function (item) {
                //添加点击后删除节点 tr
                //两种方式 父节点.removeChild  自杀remove()
                item.onclick = function () {
                    // console.log(this);
                    //↓↓↓this是你点击删除的那一个 我们要删一行 所以要删除tr
                    //所以这里选区它的父元素(td)的父元素(tr)
                    // this.parentElement.parentElement.remove();//自杀

                    //第二种方式 他杀 父节点.removeChild(子节点)
                    //tbody父节点 
                    tbody.removeChild(item.parentElement.parentElement);
                };
            });
        };
        del.onclick = function () {
            //点了这个按钮之后 循环遍历判断checkbox里面的checked属性是什么
            //要先获取到这一些checkbox节点 我才能去遍历判断
            var cbx = document.querySelectorAll('input[type=checkbox]');
            cbx.forEach(function (item) {
                console.log(item);
                //item代表着每一个checkbox
                //要移除的是checked属性为true的那个tr
                // console.log(item);
                if (item.checked) {
                    //已经被勾选
                    item.parentElement.parentElement.remove();
                }
            })
        }
        //排序
        sort.onclick = function () {
            //获取当前页面上的所有tr  除了第一个tr 其他的都要 
            var trs = document.querySelectorAll('tr:not(first-child)');
            //伪数组↑
            // console.log(trs);
            //因为我想用一些数组的方法来操作它 但是它不是真正的数组用不了 先转成数组
            var newArr = [...trs];
            //innerHTML不仅能写 还能读
            // console.log(newArr[0].children[2].innerHTML);
            newArr.sort(function (a, b) {
                //a,b是数组中相邻的两个元素
                //对应这里就是相邻的两个tr
                return a.children[2].innerHTML - b.children[2].innerHTML;
            });
            //把新的tr写上去
            newArr.forEach(function (item) {
                tbody.appendChild(item);
            });
        };



    </script>
</body>

</html>